﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/AdminPanel/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<WebMVC.Areas.AdminPanel.Models.TemplateCreateViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	CreateTemplate
</asp:Content>
<asp:Content ID="headCont" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="/Content/colorpicker.css" />
    <script src="/Scripts/json2.js" type="text/javascript" ></script>
    <script src="/Scripts/colorpicker.js" type="text/javascript" ></script>
    <script src="/Scripts/ajaxupload.js" type="text/javascript" ></script>
    <script src="/Scripts/adminpanel.template.js" type="text/javascript" ></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create Template</h2>

    <div>
        <div id="create-template-top" >
        <div id="template-fields-panel" class="ui-corner-all">
            <div id="template-fields"></div>
          <a href="javascript:void" id="create-field" class="icon-link create-link" >add field</a>
        </div>
        <div id="template-preview" class="ui-corner-all">
            <div id="upload-panel"><input type="button" id="upload-button" value="upload" />
                <p id="file-upload-status"></p>
            </div>
            <div id="customizationZone">
                
            </div>
        </div>
        </div>
        <div id="field-properties-panel" class="ui-corner-all">
            <label>Font: </label><%=Html.DropDownList("fonts", Model.Fonts, new {id="font-select" })%>
            <label>Size: </label><input type="text" id="font-size" />
            <label>Color RGB: </label><input type="text" id="font-color" />
            <label>Align: </label>
            <select id="font-align" >
                <option value="right">Right</option>
                <option value="left">Left</option>
            </select>
            <label>Positioning: </label>
            <select id="font-position" >
                <option value="abs">None</option>
                <option value="center">Center</option>
            </select>
            <label>Pos X: </label><input type="text" id="text-pos-x" />
            <label>Pos Y: </label><input type="text" id="text-pos-y" />
            <label>Max lenght: </label><input type="text" id="text-max-lenght" />
        </div>
    </div>
    <%using (Html.BeginForm())
      { %>
      <div id="template-prop-panel" class="ui-corner-all">
        <%=Html.HiddenFor(m => m.TemplateJSON,new{id="template-json"}) %>
        <%=Html.LabelFor(m => m.NameEn) %>
        <%=Html.TextBoxFor(m => m.NameEn) %>
        <%=Html.LabelFor(m => m.NameRu) %>
        <%=Html.TextBoxFor(m => m.NameRu) %>
        <%=Html.LabelFor(m => m.NameAm) %>
        <%=Html.TextBoxFor(m => m.NameAm) %>
        <a href="javascript:void" id="save-template-link">Save template</a>
      </div>
    <%} %>
    <div id="field-type-content">
        <label for="field-type">Field name</label>
        <select id="field-type">
            <option value="fullName">Full name</option>
            <option value="company">Company</option>
            <option value="email">Email</option>
            <option value="companyMessage">Company message</option>
            <option value="tel1">Tel 1</option>
            <option value="tel2">Tel 2</option>
            <option value="tel3">Tel 3</option>
            <option value="tel4">Tel 4</option>
            <option value="addressLine1">Address line 1</option>
            <option value="addressLine2">Address line 2</option>
            <option value="addressLine3">Address line 3</option>
            <option value="addressLine4">Address line 4</option>
        </select>
    </div>
</asp:Content>
